<template>
	<li class="blog-item">
		<div class="container">
			<router-link :to="`/userhomepage/${userinfo.userinfo.user_id}`"> <el-avatar :src="`${ENV.VITE_BASE_URL}${blogItem?.user.avatar}`" /> </router-link>

			<div class="main">
				<h1>
					<router-link :to="`/userhomepage/${userinfo.userinfo.user_id}`">{{ blogItem?.user.nickName }}</router-link>
				</h1>
				<div class="time">{{ formatTime(blogItem!.createdAt) }}</div>
				<div class="content">
					<p class="text" ref="text">
						<a class="unfold" v-if="isUnfolded" @click="unfold" href="javascript:;"
							><span>
								展开全文<el-icon><ArrowDown /></el-icon> </span
						></a>
						{{ blogItem!.content }}
						<a class="close" v-if="isClosed" @click="close" href="javascript:;">
							收起全文 <el-icon><ArrowUp /></el-icon>
						</a>
					</p>
				</div>
				<div class="image-list">
					<el-image style="width: 110px; height: 110px" v-for="(item, index) in blogItem?.image" :src="`${ENV.VITE_BASE_URL}${blogItem?.image[index]}`" :preview-src-list="blogItem?.image.map((src:string) => `${ENV.VITE_BASE_URL}${src}`)" :initial-index="index" fit="cover" />
				</div>
			</div>
		</div>
		<div class="funt-area">
			<ul>
				<li>
					<a href="javascript:void(0);"
						><el-icon><Star /></el-icon>
						收藏
					</a>
				</li>
				<li>
					<a href="javascript:void(0);" @click="getComments">
						<svg class="icon" aria-hidden="true">
							<use xlink:href="#icon-pinglun"></use>
						</svg>
						评论
					</a>
				</li>
				<li>
					<a href="javascript:void(0);">
						<svg class="icon" aria-hidden="true">
							<use xlink:href="#icon-dianzan"></use>
						</svg>
						点赞
					</a>
				</li>
			</ul>
		</div>
		<Loading v-if="loading"></Loading>
		<CommentList v-if="commentListShow"></CommentList>
		<router-link to="" class="no-more" v-if="noMore">
			查看更多<el-icon><ArrowRight /></el-icon>
		</router-link>
	</li>
</template>

<script setup lang="ts">
import { getCommentList } from "@/api/comment";
import { useUserinfoStore } from "@/stores/userinfo";
import formatTime from "@/util/formatTime";
import { computed, onMounted, provide, reactive, ref, type PropType, type Ref } from "vue";
import { defineAsyncComponent } from "vue";
import CommentList from "./commentList.vue";
const Loading = defineAsyncComponent(() => import("@/components/loading.vue"));

const ENV = import.meta.env;
const text: Ref<HTMLDivElement | null> = ref(null);
const isUnfolded = ref(false);
const isClosed = ref(false);
const loading = ref(false);
const commentListShow = ref(false);
const commentList: Ref<commentItemType[]> = ref([]);
const count = ref(-1);
const userinfo = useUserinfoStore();
provide("commentList", commentList);
const getComments = async () => {
	if (commentListShow.value) {
		commentListShow.value = false;
		commentList.value = [];
		return;
	}
	loading.value = true;
	try {
		const {
			data: { data },
			config: { timeDiff }
		} = await getCommentList(props!.blogItem!.blog_id, 1, 7);
		if (timeDiff! < 1000) {
			await new Promise<void>((resolve, reject) => {
				setTimeout(() => {
					resolve();
				}, 1000 - timeDiff!);
			});
		}

		commentList.value = data.rows;
		count.value = data.count;
	} finally {
		loading.value = false;
		commentListShow.value = true;
	}
};

const props = defineProps({ blogItem: { require: true, type: Object as PropType<blogItemType> } });
provide("blogItem", props.blogItem);

const unfold = () => {
	isUnfolded.value = false;
	isClosed.value = true;
	text.value!.style.maxHeight = "none";
};
const close = () => {
	isUnfolded.value = true;
	isClosed.value = false;
	text.value!.style.maxHeight = "92px";
};

onMounted(() => {
	//假如应有高度比当前高度高，说明字体超出范围，显示"展开全文"按钮
	if (text.value!.scrollHeight > text.value!.clientHeight) {
		isUnfolded.value = true;
	}
});
const noMore = computed(() => count.value > 7);
</script>

<style scoped lang="scss">
.blog-item {
	background-color: white;
	margin-top: 10px;
	position: relative;
	.container {
		padding: 20px 20px 4px;
	}
}
.el-avatar {
	position: absolute;
}
.main {
	padding-left: 60px;
	h1 {
		font-size: 14px;
		margin-top: 5px;
	}
	.time {
		margin-top: 5px;
		font-size: 12px;
		color: grey;
	}
	.content {
		margin-top: 5px;
		font-size: 14px;
		.text {
			//这里没用-webkit-box自带的line-clamp是因为其他浏览器兼容性太差，所以改用max-height，max高度就是line-height*行数
			max-height: 92px;
			overflow: hidden;
			//如果不加这个word-break，英文和空格等换不了行
			word-break: break-all;
			//手动设置line-height保证获取行高时不是normal，方便计算
			line-height: 23px;

			.unfold {
				float: right;
				color: $orange;
				position: relative;
				//添加margin-left是因为左边还有个省略号，得腾出一个字体空间来放省略号，不然文字和省略号会重合
				margin-left: 1em;
				clear: both;
				span {
					display: inline-flex;
					align-items: center;
				}
			}
			.unfold::before {
				content: "...";
				position: absolute;
				left: -3px;
				color: #333;
				transform: translateX(-100%);
			}
		}
		.text::before {
			content: "";
			float: right;
			width: 0;
			height: 69px; //text的max-height-"展开全文"这个文字的line-height=(92px-23px)=69px
			background: red;
		}
		.close {
			//这里添加inline-block是因为如果inline到了末尾会被拆分两行，但是行内块的话永远都是一起的，所以如果放不下全部的那全部都会到下一行
			display: inline-flex;
			align-items: center;
			color: $orange;
		}
	}
}
.funt-area {
	width: 100%;
	padding: 8px 0;
	border-top: 1px solid $grey;
	ul {
		justify-content: space-around;
		display: flex;
		li {
			flex: 1;
		}
		a {
			.el-icon,
			.icon {
				margin-right: 5px;
				font-size: 15px;
			}
			width: 100%;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			font-size: 12px;
			color: grey;
		}
	}
}
.el-image {
	margin-top: 4px;
	margin-right: 8px;
}
.no-more {
	background-color: #f2f2f5;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	height: 36px;
	line-height: 36px;
	text-align: center;
	border-top: 1px solid $grey;
}
</style>
